<template>
<view>
    <view class="top_search">
        <uni-search-bar :radius="100" @input="searchFn" @cancel="cancleFn" placeholder="请搜索商户"></uni-search-bar>
    </view>
    <view class="tips"><text>*</text>只显示外部合作商户</view>
    <view class="list_box">
        <checkbox-group @change="checkboxChange" class="uni-list">
            <label class="list_main" v-for="(item,index) in dataList" :key="index">
                <view>
                    <checkbox :value="item.id+''" :checked="item.checked" />
                </view>
                <view>
                    <label class="label-2-text" :for="item.title">
                        <text>{{item.title}}</text>
                    </label>
                    <div class="lable-type">{{item.city}}</div>
                </view>
            </label>
        </checkbox-group>
        <van-empty v-if="dataList.length == 0" description="暂无记录" />
    </view>
    <text class="true_btn" @click="true_btnFn" v-if="dataList.length >0">
        确定
    </text>
    <wzp-picker ref="wzpPicker" :mode="mode" :pickerList="pickerList" :defaultIndex="defaultIndex" @onConfirm="onConfirm"></wzp-picker>
</view>
</template>

<script>
import wzpPicker from '@/component/wzp-picker/wzpPicker';
import request from '@/utils/request.js';
// import func from "@/utils/func.js";
export default {
    components: {
        wzpPicker
    },
    data() {
        return {
            searchValue: '',
            dataList: [],
            radioItems: [{
                    name: 'USA',
                    value: '美国',
                },
                {
                    name: 'CHN',
                    value: '中国',
                    checked: 'true'
                }
            ],
            pickerList: [],
            mode: '',
            defaultIndex: [0],
            hotel_id: '',
            options: {},
            user_id: '',
            hotel_text: '',
            index: "",
            hotel_ids: "",
            timeout:null
        };
    },
    onLoad(options) {
        this.options = options;
        // func.changeDocumentTitle('分配到商户');
    },
    methods: {
        cancleFn() {
            let _this = this
            _this.hotel_ids = [];
            _this.$forceUpdate()
            console.log(_this.hotel_ids);
            _this.searchValue = ''
        },
        searchFn(e) {
            let _this = this;
            _this.dataList = [];
            _this.searchValue = e.value
            if(_this.timeout){
                clearTimeout(_this.timeout)
            }
            _this.timeout = setTimeout(function () {
                _this.getData()
            }, 1000)

        },
        checkboxChange(e) {
            let _this = this;
            _this.hotel_ids = e.detail.value;
        },
        getData() {
            let _this = this
            request.request({
                url: "/api/merchant.recommend/merchant",
                showLoading: true,
                token: true,
                data: {
                    member_ids: _this.options.member_id,
                    keyword: _this.searchValue,
                },
                success(res) {
                    if (res.code == 200) {

                        _this.dataList = res.data.list;
                    }
                },
                fail(e) {
                    uni.showToast({
                        icon: "none",
                        title: "服务器开小差去啦~",
                    })
                }
            })
        },
        onConfirm(e) {
            this.hotel_id = this.pickerList[e[0]].id
            this.dataList[this.index].hotel_text = this.pickerList[e[0]].title
            this.$forceUpdate()
        },
        true_btnFn() {
            let _this = this
            request.request({
                url: "/api/merchant.recommend/allocate",
                showLoading: true,
                token: true,
                data: {
                    hotel_ids: _this.hotel_ids,
                    member_ids: [_this.options.member_id],
                },
                success(res) {
                    if (res.code == 200) {
                        let msg = res.msg;
                        uni.showModal({
                            title: '提示',
                            content: '是否确定该操作？',
                            success: function (res) {
                                if (res.confirm) {
                                    uni.showToast({
                                        title: msg,
                                        duration: 2000
                                    });
                                    setTimeout(() => {
                                        uni.navigateBack()
                                    }, 2000)

                                } else if (res.cancel) {}
                            }
                        })
                    } else {
                        uni.showToast({
                            icon: 'none',
                            title: res.msg
                        })
                    }
                },
                fail(e) {
                    uni.showToast({
                        icon: "none",
                        title: "服务器开小差去啦~",
                    })
                }
            })
        },

    }
}
</script>

<style lang="less">
page {
    padding: 0;
    background-color: #f4f4f4;
}

.tips {
    font-size: 14px;
    padding: 0 20px 10px 30px;
    background: white;
    color: #000;

    text {
        color: red;
    }
}

.label-2-text {
    font-size: 16px;
}

.lable-type {
    font-size: 14px;
    margin-top: 2px;
}

.top_search {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #FFFFFF;
}

.list_box {
    width: 100%;
    padding: 30upx 0upx;
    box-sizing: border-box;

    .list_main {
        padding: 20upx 30upx;
        border-bottom: 1upx solid #f4f4f4;
        background-color: #FFFFFF;
        display: flex;
        justify-content: left;
    }
}

.true_btn {
    position: fixed;
    right: 40upx;
    bottom: 40upx;
    padding: 15upx 25upx;
    background: #007AFF;
    color: #FFFFFF;
    border-radius: 20upx;
    font-size: 25upx;
}
</style>
